<template>
	<view style="flex:1; width: 100%;height: 100%;position: relative;">
		<!-- 模型显示区域 -->
		<view style="width: 100%;height: 100%;background: rgba(0,0,0,0.2);">
			<Preview3D @loaded="loaded" ref="preview" v-bind="options">
			</Preview3D>
		</view>
		<view class="download-stp" v-if="isDownload">
			<text class="iconfont icon-xiazai download-icon"></text>
			<text class="download-text">3D文档下载</text>
		</view>
		<customLoading :show="isLoading"></customLoading>
	</view>
</template>

<script>
	// 模型尺寸不对，是模型的问题，可以无视，可以尝试切换modelurl的值，这里使用机器人是为了播放动画
	// 或者直接点击切换模型看头盔的
	import Preview3D from '@/components/threeJs/preview3D.vue'
	export default {
		components: {
			Preview3D
		},
		data() {
			return {
				options: {
					// modelurl: "https://mp-5a81006c-e233-49f0-8a6a-cb59bcd34a71.cdn.bspapp.com/images/RobotExpressive07.glb",
					modelurl: "/static/RobotExpressive.glb",

					// 如果自己的设备黑屏不显示模型，请换成jpg
					// https://www.ccnihao.fun/public-resource/de_balie-compress.jpg
					env: "https://www.ccnihao.fun/public-resource/studio_small_09_1k.hdr",
					// env: "https://mp-5a81006c-e233-49f0-8a6a-cb59bcd34a71.cdn.bspapp.com/images/de_balie-compress.jpg",
					// env: "https://mp-5a81006c-e233-49f0-8a6a-cb59bcd34a71.cdn.bspapp.com/images/downloaded-image4.jpg",
					// env: "https://www.ccnihao.fun/public-resource/de_balie-compress.jpg",
					// 缩放比例
					scale: .6,
					// 是否显示环境贴图
					backgroundVisible: false,
					// 自动旋转
					autoRotate: true,
					// 旋转速度
					autoRotateSpeed: 2.0
				},
				isLoading: false,

			}
		},
		props: {
			isDownload: {
				type: Boolean,
				default: false
			},
			fileID: {
				type: String,
				default: ''
			},
		},
		mounted() {
			this.isLoading = true;
			console.log('this.fileID:',this.fileID)
			this.options.modelurl = this.fileID
			// uni.showLoading({
			// 	title: '加载中'
			// })
		},
		methods: {
			loaded() {
				// 模型加载完毕
				// uni.hideLoading()
				this.isLoading = false;
				console.log("模型加载完毕")
			},

		}
	}
</script>

<style scoped>
	.download-stp {
		position: absolute;
		top: 20px;
		right: 24px;
		width: 108px;
		height: 20px;
		background-color: #F8F8F8;
		padding: 10px 20px;
		border-radius: 6px;
	}
	
	.download-stp:hover {
		background-color: #E60012;
		color: #FFF;
	}

	.download-icon {
		width: 30px;
		height: 30px;
		font-size: 20px;
		display: inline-block;
		padding-top: 2px;
		float: left;
	}

	.download-text {
		font-size: 14px;
		/* color: #333; */
		display: inline-block;
		float: left;
	}
</style>